<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI助手 - 渡物 Dimension</title>
  <link rel="stylesheet" href="assets/css/style.css">
  <style>
    .chat-container {
      max-height: 60vh;
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: var(--gap);
      margin-bottom: var(--gap);
      background: var(--color7);
    }
    .message {
      margin-bottom: var(--gap);
      padding: 0.5rem;
      border-radius: 0.5rem;
      max-width: 80%;
    }
    .message.user {
      background: var(--primary);
      color: #fff;
      margin-left: auto;
    }
    .message.ai {
      background: var(--card-bg);
      color: var(--text);
    }
    .message img {
      max-width: 100px;
      border-radius: 0.5rem;
      cursor: pointer;
    }
    .message-content span.bold-text {
      font-weight: 600;
      color: var(--primary);
    }
    #loading {
      text-align: center;
      color: var(--muted);
    }
    .dark-mode .message.user {
      background: var(--color5);
    }
    .dark-mode .message.ai {
      background: var(--color4);
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="nav-container">
      <nav class="nav-menu">
        <div class="nav-item"><a href="index.html">首页</a></div>
        <div class="nav-item"><a href="designs.html">设计</a></div>
        <div class="nav-item dropdown">
          <a href="categories.html">商品</a>
          <div class="dropdown-content">
            <a href="categories.html#basic">基础</a>
            <a href="categories.html#light">灯类</a>
            <a href="categories.html#bed">床类</a>
            <a href="categories.html#table">桌类</a>
            <a href="categories.html#chair">椅类</a>
            <a href="categories.html#stool">凳类</a>
            <a href="categories.html#sofa">沙发</a>
            <a href="categories.html#cabinet">柜类</a>
            <a href="categories.html#shelf">架类</a>
            <a href="categories.html#decoration">装饰</a>
            <a href="categories.html#suite">组合</a>
            <a href="categories.html#other">其他</a>
          </div>
        </div>
        <div class="nav-item search"><input type="text" placeholder="搜索..."></div>
        <div class="nav-item"><a href="settings.html">设置</a></div>
        <div class="nav-item"><a href="profile.html">个人中心</a></div>
        <div class="nav-item"><a href="contact.html">联系我们</a></div>
        <div class="nav-item">🎵</div>
      </nav>
    </div>
  </header>
  <div class="nav-spacer"></div>
  <div class="container">
    <h1 class="function_title">AI助手</h1>
    <div class="form-card">
      <div class="chat-container" id="messages"></div>
      <div class="flex flex-col gap-1">
        <label>
          <span>输入消息</span>
          <input type="text" id="chat-input" placeholder="输入您的消息...">
        </label>
        <button type="submit" class="btn" onclick="sendMessage()">发送</button>
      </div>
    </div>
  </div>
  <footer class="site-footer">
    <p>© 2025 渡物 Dimension. 保留所有权利。</p>
  </footer>
  <script>
    // 格式化消息文本
    function formatMessage(text) {
      if (!text) return '';
      let lines = text.split('\n');
      let formattedLines = lines.map(line => {
        line = line.replace(/\*\*(.*?)\*\*/g, '<span class="bold-text">$1</span>');
        return line;
      });
      let processedText = formattedLines.join('\n');
      let sections = processedText
        .split('###')
        .filter(section => section.trim())
        .map(section => {
          let lines = section.split('\n').filter(line => line.trim());
          if (lines.length === 0) return '';
          let result = '';
          let currentIndex = 0;
          while (currentIndex < lines.length) {
            let line = lines[currentIndex].trim();
            if (/^\d+\./.test(line)) {
              result += `<p class="section-title">${line}</p>`;
            } else if (line.startsWith('-')) {
              result += `<p class="subsection"><span class="bold-text">${line.replace(/^-/, '').trim()}</span></p>`;
            } else if (line.includes(':')) {
              let [subtitle, content] = line.split(':').map(part => part.trim());
              result += `<p><span class="subtitle">${subtitle}</span>: ${content}</p>`;
            } else {
              result += `<p>${line}</p>`;
            }
            currentIndex++;
          }
          return result;
        });
      return sections.join('');
    }

    // 显示消息
    function displayMessage(role, message) {
      const messagesContainer = document.getElementById('messages');
      const messageElement = document.createElement('div');
      messageElement.className = `message ${role}`;
      const avatar = document.createElement('img');
      avatar.src = role === 'user' ? 'assets/images/user-avatar.png' : 'assets/images/bot-avatar.png';
      avatar.alt = role === 'user' ? 'User' : 'Bot';
      const messageContent = document.createElement('div');
      messageContent.className = 'message-content';
      messageContent.innerHTML = role === 'user' ? message : formatMessage(message);
      messageElement.appendChild(avatar);
      messageElement.appendChild(messageContent);
      messagesContainer.appendChild(messageElement);
      messageElement.scrollIntoView({ behavior: 'smooth' });
    }

    // 发送消息
    function sendMessage() {
      const inputElement = document.getElementById('chat-input');
      const message = inputElement.value;
      if (!message.trim()) return;
      displayMessage('user', message);
      inputElement.value = '';
      const loadingElement = document.createElement('div');
      loadingElement.id = 'loading';
      loadingElement.style.display = 'block';
      loadingElement.textContent = '加载中...';
      document.getElementById('messages').appendChild(loadingElement);
      const apiKey = 'sk-5667c8b26be74ec5904616e7638ffc1e'; // 替换为实际API密钥
      const endpoint = 'https://api.deepseek.com/chat/completions';
      const payload = {
        model: "deepseek-chat",
        messages: [
          { role: "system", content: "你是渡物Dimension的AI助手，专注于提供家居设计建议，风格简洁、现代，回答专业且具象化，帮助用户优化室内布局与装饰选择，你的形象是一个可爱的白色卷尺。" },
          { role: "user", content: message }
        ],
        stream: false
      };
      fetch(endpoint, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'Authorization': `Bearer ${apiKey}`
        },
        body: JSON.stringify(payload)
      })
      .then(response => response.json())
      .then(data => {
        if (loadingElement) loadingElement.remove();
        if (data.choices && data.choices.length > 0) {
          displayMessage('bot', data.choices[0].message.content);
        } else {
          displayMessage('bot', '出错了，请稍后再试。');
        }
      })
      .catch(error => {
        if (loadingElement) loadingElement.remove();
        displayMessage('bot', '出错了，请稍后再试。');
        console.error('Error:', error);
      });
    }

    // 添加回车发送功能
    document.getElementById('chat-input').addEventListener('keypress', function(event) {
      if (event.key === 'Enter' && !event.shiftKey) {
        event.preventDefault();
        sendMessage();
      }
    });

    // 主题切换功能
    function toggleTheme() {
      document.body.classList.toggle('dark-mode');
      const chatContainer = document.querySelector('.chat-container');
      chatContainer.classList.toggle('dark-mode');
      const messages = document.querySelector('#messages');
      messages.classList.toggle('dark-mode');
      localStorage.setItem('darkMode', document.body.classList.contains('dark-mode'));
    }

    // 页面加载时检查主题设置
    document.addEventListener('DOMContentLoaded', () => {
      const isDarkMode = localStorage.getItem('darkMode') === 'true';
      if (isDarkMode) {
        document.body.classList.add('dark-mode');
        document.querySelector('.chat-container').classList.add('dark-mode');
        document.querySelector('#messages').classList.add('dark-mode');
      }
    });
  </script>
</body>
</html>